<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container{
			font-size: 0;
			max-width: 530px;
			margin-top: 200px;
			margin-left: 100px;
		}

		.page-item{
			display: inline-block;
			font-size: 14px;
			min-height: 15px;
			text-align: center;
			line-height: 15px;
			padding-left: 5px;
			padding-right: 5px;
			margin-left: 5px;
			margin-right: 5px;
			border: 1px solid #ccc;
			border-radius: 3px;
			cursor: pointer;
		}

		.ellipsis{
			display: inline-block;
			font-size: 14px;
			min-height: 15px;
			text-align: center;
		}

		.next-page,.prev-page{
			display: inline-block;
			padding-left: 10px;
			padding-right: 10px;
			font-size: 14px;
			min-height: 15px;
			text-align: center;
			margin-left: 10px;
			margin-right: 10px;
			border: 1px solid #ccc;
			border-radius: 3px;
			cursor: pointer;
		}

		.active{
			background: skyblue;
			color: white;
		}
	</style>
</head>
<body>
	<div id="web">
		<div class="container">
			
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
	<script>

			function Pagination(config,ajax){
				//参数
				if(!config || typeof config !== 'object'){
					throw new Error('请输入合法分页器参数！');
				}
				if(!ajax || typeof ajax !== 'function'){
					throw new Error('请输入合法分页器参数！');
				}

				this.totalPage = config.totalPage || 10;//总页数
				this.rootNode;//根节点
				if(config.rootNode){
					this.rootNode = config.rootNode;
				}else{
					var name = 'container';
				 	document.body.innerHTML += '<div class="' + name + '"></div>';
				 	this.rootNode = name;
				}
				this.currentPage = 1;//默认开始第一页


				//初始化
				this.init = function(){
					var	template;
					for(var i = 1; i <= 5; i++){
						template += (i === 1)? 
						'<a class="page-item active">'+ i +'</a>' : 
						'<a class="page-item">' + i + '</a>';
					}

					template += '<span class="page-item ellipsis">...</span>';
					template += '<a class="page-item">' + this.totalPage + '</a>';
					template += '<span class="next-page">下一页</span>';
			
					$(this.rootNode).append(template);

					this.addHandler();
					var that = this;
					ajax && ajax(that.currentPage);
				};

				//分页器按钮点击触发的事件
				this.pointed = function(self){
		
					if(isNaN(parseInt(self.innerText)) === true){	//判断传入的值是数字还是文字
						switch(true){
							case (/下一页/g.test(self.innerText)):{
								this.currentPage += 1;
								break;
							}

							case (/上一页/g.test(self.innerText)):{
								this.currentPage -= 1;
								break;
							}

						}

					}
					else{
						this.currentPage = parseInt(self.innerText);//判断当前页码
					}
					

					$(this.rootNode).empty();

					var startIndex,//开始页码
						template;
					
					template = (this.currentPage > 1) ? '<span class="prev-page">上一页</span>' : '';
					
					template += (this.currentPage >= 5) ? '<a class="page-item">1</a><span class="page-item ellipsis">...</span>' : '';

					if(this.currentPage < 5 ){	//渲染前5页
						for(var i = 1; i <= 5; i++){
							template += (i === this.currentPage)? 
							'<a class="page-item active">'+ i +'</a>' : 
							'<a class="page-item">' + i + '</a>';
						}
					}

					else if(this.currentPage > (this.totalPage - 4)){	//渲染后5页
						for(var i = (this.totalPage - 4); i < this.totalPage; i++){
							template += (i === this.currentPage)? 
							'<a class="page-item active">'+ i +'</a>' : 
							'<a class="page-item">' + i + '</a>';
						}
					}

					else{	//渲染中间页
						startIndex = this.currentPage - 2;
						for(var i = startIndex; i < (startIndex + 5); i++){
							template += (i === this.currentPage)? 
							'<a class="page-item active">'+ i +'</a>' : 
							'<a class="page-item">' + i + '</a>';
						}
						
					}

					template += (this.currentPage < (this.totalPage - 3))? '<span class="page-item ellipsis">...</span>' : '';

					template += (this.currentPage === this.totalPage)? 
					'<a class="page-item active">' + this.totalPage + '</a>' : 
					'<a class="page-item">' + this.totalPage + '</a>';

					template += (this.currentPage < this.totalPage)? '<span class="next-page">下一页</span>' : '';

					$(this.rootNode).append(template);

					this.addHandler();

				};

				//给每个分页器按添加点击事件
				this.addHandler = function(){
					var that = this;
					$('.container').children().each(function(i,el){
							el.onclick = function(e){
								that.pointed(e.target);
								ajax && ajax(that.currentPage);
							}
					});
				}
			}

				
			var pagination = new Pagination({
				totolPage:10,
				rootNode:'.container'
			},function(currentPage){
				alert(currentPage);
			});
			pagination.init();
	</script>
</body>
</html>